<script>
import adminSalesDeal from "@/components/AdminSalesDeal.vue";
import {getToken} from "@/store/token";

export default {
  name: "AdminAfterSalesTable",
  components: {adminSalesDeal},
  props: ["status"],
  data() {
    return {
      state: {
        sales: {},
        keyword: "",
        page: 1,
        size: 3
      },
      total: 0,
      visible: false,
      orderId: "",
      salesOrders: {}
    }
  }, filters: {
    myFilter(value) {
      return parseFloat(value).toFixed(2);
    }
  }, methods: {
    getAfterSales() {
      let userId = ''
      if (getToken("role") === "user") {
        userId = JSON.parse(getToken("user")).id
      }
      let state = this.status
      if (this.status === "0") {
        state = null
      }

      this.$api.afterSale.getAfterSales(
          this.state.page,
          this.state.size,
          this.state.keyword,
          userId,
          state
      ).then(res => {
        if (res.data.success) {
          this.state.sales = res.data.content
          this.total = Number(res.data.total)
        }
      })
    }, search() {
      this.getAfterSales()
    },
    toDealOrder(order) {
      this.salesOrders = order
      //this.salesOrders.orderId = order.orderId
      //this.salesOrders.returnTotal = order.returnTotal
      //this.salesOrders.userId = order.userId
      //this.salesOrders.returnCause = order.returnCause
      this.visible = true
    },
    salesPage(val) {
      this.visible = val
      this.getAfterSales()
    }
  }, mounted() {
    this.getAfterSales()
  }
}
</script>

<template>
  <div style="width: 950px;">
    <div style="margin-bottom: 10px;">
      <el-input
          v-model="state.keyword"
          placeholder="商品名称/订单号"
          prefix-icon="el-icon-search"
          style="width: 400px;margin-right: 10px"
          clearable
          @clear="search"
          @keydown.enter.native="search"></el-input>
      <el-button
          type="primary"
          @click="search">
        搜索
      </el-button>
    </div>
    <div class="order-title">
      <div style="width: 410px;"><span>宝贝</span></div>
      <div style="width: 110px;"><span>单价</span></div>
      <div style="width: 140px;"><span>申请时间</span></div>
      <div style="width: 130px;"><span>退款金额</span></div>
      <div style="width: 130px;"><span>退款状态</span></div>
      <div style="width: 130px;"><span>交易操作</span></div>
    </div>
    <div class="order-body" v-for="(item,index) in state.sales">
      <div class="order-body-title">
        <div style="display: flex;font-size: 14px">
          <div><span style="color:#3c3c3c;">订单号:{{ item.orderId }}</span></div>
        </div>
        <!--<div class="el-icon-delete"></div>-->
      </div>
      <div style="display:flex;border: 1px solid #f5f5f5;">
        <div>
          <div class="body-baby" v-for="(orderItem,oIndex) in item.orderItems">
            <div class="order-body-baby">
              <div style="margin-right: 10px"><img class="order-baby-img" :src="orderItem.periodical.coverAddress"
                                                   alt="">
              </div>
              <div style="display: flex;flex-direction: column">
                <span>{{ orderItem.periodical.name }}</span>
                <span style="color:#3c3c3c;font-size: 14px"><span
                    style="color:#646464;font-size: 14px">购买数量：{{ orderItem.num }}&nbsp;购买年数：{{
                    orderItem.year
                  }}<br/>起刊时间：{{
                    orderItem.startTime
                  }}</span></span>
              </div>
            </div>
            <div class="order-all" style="width: 100px;">
              <span>￥<span style="text-decoration: line-through">{{ orderItem.price * 1.2 | myFilter }}</span></span>
              <span>￥<span style="color: #ff791f;">{{ orderItem.price | myFilter }}</span></span>
            </div>
          </div>
        </div>
        <div class="order-all order-bottom" style="width: 160px;">
          <a>{{ item.createTime }}</a>
        </div>
        <div class="order-all order-bottom" style="width: 80px; text-align: center">
          <span>￥<span style="color: #ff791f;">{{ item.returnTotal | myFilter }}</span></span>
        </div>
        <div class="order-all order-bottom" style="width: 120px;">
          <el-tag v-if="item.status===6" type="warning">退款处理中</el-tag>
          <el-tag v-if="item.status===7" type="success">退款成功</el-tag>
          <el-tag v-if="item.status===8" type="danger">拒绝退款</el-tag>
        </div>
        <div class="order-all order-bottom" style="width: 112px;">
          <span class="detail" v-if="item.status===6" style="cursor: pointer" @click="toDealOrder(item)">处理退款</span>
          <el-popover
              v-if="item.status===8"
              placement="top-start"
              title="拒绝原因"
              trigger="hover"
              :content="item.refuseCause+',对结果有问题联系管理员'">
            <el-button slot="reference">查看原因</el-button>
          </el-popover>
        </div>
      </div>
    </div>
    <div style="width: 20px;margin: 10px auto 0">
      <el-pagination
          @current-change="getAfterSales"
          :current-page.sync="state.page"
          :page-size="state.size"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <admin-sales-deal v-if="visible" @changeVal="salesPage"
                      :sales-orders="salesOrders"></admin-sales-deal>
  </div>
</template>

<style scoped>
.detail:hover{
  color: #ff9696;
}
</style>